import { Avatar } from 'antd-mobile'
import React from 'react'
import { UserOutline, SetOutline } from 'antd-mobile-icons'

import { useNavigate } from 'react-router-dom'
import { store } from '../../store/index'
function My() {
    // const { userInfo, isLogin } = useSelector(state => state.userSlice)
    const navigate = useNavigate()

    const handleLogout = () => {
        localStorage.removeItem('token')
        store.dispatch({ type: 'user/clearUserInfo' })
        navigate('/login')
    }
    return (
        <div>

            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                <div style={{ display: 'flex' }}>
                    <Avatar src={localStorage.getItem('avatar')} />
                    <b style={{ fontSize: '20px' }}>{localStorage.getItem('nickname')}</b>
                </div>
                <div style={{ display: 'flex' }}>
                    <div>
                        <UserOutline style={{ fontSize: '30px' }} />
                        <p>我的客服</p>
                    </div>
                    <div onClick={handleLogout} style={{ marginLeft: '20px' }}>
                        <SetOutline style={{ fontSize: '30px' }} />
                        <p >设置</p>
                    </div>

                </div>
            </div>

        </div>
    )
}

export default My